<template>
  <div class="home-container">
    <!-- 学院管理部分 -->
    <div class="section">
      <div class="section-header">
        <h2>学院管理</h2>
      </div>
      <div class="college-grid">
        <div v-for="college in colleges" 
             :key="college.id" 
             class="college-card"
             @click="goToCollege(college.id)">
          <div class="college-icon">{{ college.icon }}</div>
          <div class="college-info">
            <div class="college-name">{{ college.name }}</div>
            <div class="college-description">{{ college.description }}</div>
            <div class="college-stats">
              <div class="stat-item">
                <span class="label">班级数</span>
                <div class="value">{{ college.classCount }}</div>
              </div>
              <div class="stat-item">
                <span class="label">学生数</span>
                <div class="value">{{ college.studentCount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// import { collegeAPI } from '@/api/admin/college' // 注释掉旧的导入
import { getColleges } from '@/api/admin/yzhTeacher' // 导入新的API

const router = useRouter()

// 学院数据
const colleges = ref([])

// 获取学院数据
const fetchColleges = async () => {
  try {
    // const response = await collegeAPI.getColleges() // 使用旧API的调用
    const response = await getColleges() // 直接调用导入的函数
    console.log('Home.vue: 获取到的学院数据 (来自 yzhTeacher.js):', response)
    // colleges.value = response || [] // 旧的处理方式，假设response直接是数组
    if (response && response.status === 'success' && response.data && response.data.colleges) {
      colleges.value = response.data.colleges
    } else {
      colleges.value = []
      console.error('Home.vue: 获取学院数据失败或格式不正确:', response)
    }
  } catch (error) {
    console.error('获取学院数据失败:', error)
    // 如果API失败，使用静态数据
    colleges.value = [
      { 
        id: 1, 
        name: '计算机科学与技术学院', 
        icon: '💻',
        classCount: 15,
        studentCount: 450,
        description: '培养高素质的计算机科学与技术人才'
      },
      { 
        id: 2, 
        name: '经济与金融学院', 
        icon: '💰',
        classCount: 12,
        studentCount: 360,
        description: '培养金融经济领域的专业人才'
      },
      // ... 更多静态数据
    ]
  }
}

const goToCollege = (id) => {
  router.push(`/admin/college/${id}`)
}

// 组件挂载时获取数据
onMounted(() => {
  fetchColleges()
})
</script>

<style scoped>
.home-container {
  padding: 30px;
  background: #f0f2f5;
  min-height: 100vh;
}

.section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 24px;
  color: #333;
}

/* 学院卡片样式 */
.college-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.college-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.college-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.college-icon {
  font-size: 36px;
  margin-bottom: 15px;
}

.college-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.college-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.college-stats {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.stat-item {
  background: white;
  border-radius: 8px;
  padding: 10px;
  flex: 1;
  text-align: center;
}

.stat-item .label {
  font-size: 12px;
  color: #888;
}

.stat-item .value {
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
  margin-top: 5px;
}
</style> 